<template>
    <el-card class="box-card">
        <div class="search-bar">
            <el-form :inline='true' :model='searchData' class="fl">
                <el-form-item label="日期">
                    <el-date-picker
                            v-model="searchData.startdate"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                    -
                    <el-date-picker
                            v-model="searchData.enddate"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div class="fl">
                <el-button type="text" @click="handleReset">重置</el-button>
                <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
            </div>
        </div>

        <div>
            <el-table v-loading.body="tableLoading" ref="singleTable" :data="tableData" border highlight-current-row style="width: 100%">
                <!--        <el-table-column prop="id" width="80" label="工件编号">-->
                <!--        </el-table-column>-->
                <el-table-column type="index" width="80" label="序号">
                </el-table-column>
                <el-table-column prop="stand" label="工作站" min-width="150">
                </el-table-column>
                <el-table-column prop="create_time" label="日期" min-width="120">
                </el-table-column>
                <el-table-column prop="warring_record" min-width="210" label="报警信息">
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-bar">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 25, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalRecord">
            </el-pagination>
        </div>
    </el-card>
</template>
<script>
    export default {
        data () {
            return {
                // 日期详细时间
                dateTime: '',
                addForm: {},
                dialogAddgsVisible: false,
                currentPage: 1,
                totalRecord: 0,
                pageSize: 10,
                tableLoading: false,
                searchData: {
                    startdate: null,
                    enddate: null
                },
                tableData: []
            }
        },
        created () {
            this.api.sysWarring.getList({ page_size: this.pageSize, page: this.currentPage,
                start_time: null, 
                end_time: null
            }).then((res) => {
                    this.tableData = res.data.data
                    this.totalRecord = res.data.count
            })
        },
        methods: {
            onSearch () {
                this.api.sysWarring.search({ page_size: this.pageSize, page: this.currentPage,
                    start_time: this.searchData.startdate==null?null:this.rTime(this.searchData.startdate), 
                    end_time: this.searchData.enddate==null?null:this.rTime(this.searchData.enddate)
                }).then((res) => {
                    this.tableData = res.data.data
                    this.totalRecord = res.data.count
                })
            },
            handleReset () {
                this.searchData = {
                    startdate: null,
                    enddate: null
                }
            },
            handleSizeChange (val) {
                this.pageSize = val
                this.onSearch ()
            },
            handleCurrentChange (val) {
                this.currentPage = val
                this.onSearch ()
            },
            rTime(date) {
            var json_date = new Date(date).toJSON();
            return new Date(new Date(json_date) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '') 
            }
        }
    }
</script>
<style lang="less">
    .fr {
        float: right;
    }
    .fl {
        float: left;
    }
    .search-bar {
        overflow: hidden;
    }
</style>

<style>
    .tools-bar {
        margin-bottom: 20px;
    }
</style>
